<template>
    <div>
        <van-collapse v-model="activeName" accordion>
            <van-collapse-item title="未完成" name="1">
                <div v-for="(item,index) in $store.state.list" :key="index" v-show="item.state==0">
                        <input type="checkbox" @click="change(index)" :checked="item.state!==0"/>
                        <span>{{item.title}}</span> 
                        <button @click="cancel" style="position:absolute;right:3px">取消</button>
                </div>
            </van-collapse-item>

            <van-collapse-item title="已完成" name="2">
                <div v-for="(item,index) in $store.state.list" :key="index" v-show="item.state==1">
                    <input type="checkbox" @click="change(index)" :checked="item.state==1"/>
                    <span>{{item.title}}</span>
                    <sapn  style="position:absolute;right:3px">{{item.time}}</sapn>
                </div>
            </van-collapse-item>

            <van-collapse-item title="已取消" name="3">
                <div v-for="(item,index) in $store.state.list" :key="index" v-show="item.state==2">
                    <s>{{item.title}}</s>
                    <button @click="cancel(index)">恢复</button>
                </div>
            </van-collapse-item>

        </van-collapse>
    </div>
</template>

<script>
export default {
    data(){
        return{
            activeName:1,
        }
    },

    props:["list"],

    methods:{
        //选择是否完成
        change(index){
            this.$store.commit("change",index); 
        }, 
        //删除任务
        cancel(index){
            this.$store.commit("cancel",index);
        }       
    },
}
</script>
